<script setup>

//声明一个异步的函数

import { userInfoListService,updateUserInfoService,deleteUserInfoService,addUserInfoService } from '@/api/userInfoTest.js'
import { ElMessage } from 'element-plus';
//导入 ElMessageBox 删除的弹出窗口
import { ElMessageBox } from 'element-plus';


import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'



const handleClick = () => {
    console.log('click')
  }
  const tableData = ref([
    {
        userId:'1',
        userName:'名字1',
        dateBirth:'2016-05-03',
        homeAddress:'地址1',
        phoneNumber:'19119902',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ])

// //定义函数清空数据模型的数据
// const clearRegisterData = ()=>{
//     registerData.value={
//         username:'',
//         password:'',
//         rePassword:''
//     }
// }


const UserInfoList = async () => {
    let result = await userInfoListService();
    tableData.value = result.data.data;
}

UserInfoList();


//控制添加分类弹窗
const dialogVisible = ref(false)

//添加用户信息数据模型
const user = ref({
        userId:'123',
        userName:'33',
        dateBirth:'',
        homeAddress:'',
        phoneNumber:''
})

//
const title = ref();



const showDialog = (row) => {
    //出现小窗口
    dialogVisible.value = true;
    //改变小窗口的标题，绑定事件title后修改
    /**改变title:添加分类*/
    title.value = '修改用户信息';//在 script中 ref变量也就是响应式变量要加入 value 改变其中的值，在页面组件中不需要
    //copy 拷贝数据
    user.value.userId = row.userId;
    user.value.userName = row.userName;
    // id put修改方法需要的第三个参数 文章分类的id
    user.value.dateBirth = row.dateBirth;
    user.value.homeAddress = row.homeAddress;
    user.value.phoneNumber = row.phoneNumber;
}

const updateUserInfo = async () => {
    //调用 函数接口
    let result = await updateUserInfoService(user.value);
    ElMessage.success(result.msg ? result.msg : '修改成功');

    //调用获取所有文章分类的函数（也即是刷新页面）
    UserInfoList();

    //小窗口消失
    dialogVisible.value = false;
}



//删除用户信息
//ElMessageBox 弹出 删除窗口 ,需要导入ElMessageBox
//                              import { ElMessageBox } from 'element-plus';
const deleteUserInfo = (row) => {
    ElMessageBox.confirm(
        '你确认要删除该用户信息嘛?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //调用接口
            let result = await deleteUserInfoService(row);

            
            ElMessage({


                type: 'success',
                message: '删除成功',
            })
            //调用获取所有文章分类的函数（也即是刷新页面）
            UserInfoList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消删除',
            })
        })
}

//清空user存储信息
const clearData = async () => {
    user.value = {
        userId:'',
        userName:'',
        dateBirth:'',
        homeAddress:'',
        phoneNumber:''
}

}


//添加用户信息
const addUserInfo = async () => {
    //调用 函数接口
    let result = await addUserInfoService(user.value);
    ElMessage.success(result.msg ? result.msg : '添加成功');

    //调用获取所有文章分类的函数（也即是刷新页面）
    UserInfoList();

    //小窗口消失
    dialogVisible.value = false;
}


</script>
<template>
    用户信息修改
    <el-button type="primary"
                        @click="dialogVisible = true;
                                                                                                                                        /**改变title:添加分类*/title = '添加用户信息';
                                                                                                                                        /**clearData 清空 之前存储在categoryModel中的 update文章分类的数据 */clearData();">添加用户信息
                    </el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="userId" label="userId" width="150" />
      <el-table-column prop="userName" label="userName" width="120" />
      <el-table-column prop="dateBirth" label="Data" width="120" />
      <el-table-column prop="phoneNumber" label="phoneNumber" width="120" />
      <el-table-column prop="homeAddress" label="homeAddress" width="600" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template  #default="{ row }">
            <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
            <el-button :icon="Delete" circle plain type="danger" @click="deleteUserInfo(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

            <!-- 添加用户信息修改弹窗 -->
            <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form :model="user" :rules="rules" label-width="100px" style="padding-right: 30px">
                <el-form-item label="userId" prop="userId">
                    <el-input v-model="user.userId" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="userName" prop="userName">
                    <el-input v-model="user.userName" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="dateBirth" prop="dateBirth">
                    <el-input v-model="user.dateBirth" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="homeAddress" prop="homeAddress">
                    <el-input v-model="user.homeAddress" minlength="1" maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="phoneNumber" prop="phoneNumber">
                    <el-input v-model="user.phoneNumber" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="title == '修改用户信息' ? updateUserInfo() : addUserInfo()"> 确认 </el-button>
                    <!-- 分类弹窗（增加） 又用于修改文章分类 用title判断 -->
                </span>
            </template>
        </el-dialog>
        <!-- 添加分类弹窗 -->
  </template>
  
  <style lang="scss" scoped>
  .page-container {
      min-height: 100%;
      box-sizing: border-box;
  
      .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
  }
  </style>